@charset "utf-8";
/* CSS Document */
body{
	overflow-x: hidden;
	background-color: #fff;
}
nav.topbar-responsive {
  background: #4519B1;
  padding: 0.25rem 1.5rem;
}

nav.topbar-responsive .topbar-responsive-logo {
  color: #fefefe;
  vertical-align: middle;
}

nav.topbar-responsive .menu {
  background: #4519B1;
}

nav.topbar-responsive .menu li:last-of-type {
  margin-right: 0;
}

nav.topbar-responsive .menu a {
  color: #fefefe;
  transition: color 0.15s ease-in;
	font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
		 
}

nav.topbar-responsive .menu a:hover {
  color: #dedede;
	text-decoration: underline;
}

@media screen and (max-width: 39.9375em) {
  nav.topbar-responsive .menu a {
    padding: 0.875rem 0;
  }
	nav.topbar-responsive .menu li:first-of-type {
  margin-left: 0.875rem;
}
}



@media screen and (max-width: 39.9375em) {
  nav.topbar-responsive {
    padding: 0.75rem;
  }
  nav.topbar-responsive .top-bar-title {
    position: relative;
    width: 100%;
  }
  nav.topbar-responsive .top-bar-title span {
    position: absolute;
    right: 0;
    border: 1px solid #fefefe;
    border-radius: 5px;
    padding: 0.25rem 0.45rem;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  nav.topbar-responsive .top-bar-title span .menu-icon {
    margin-bottom: 4px;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
}

@media screen and (max-width: 39.9375em) {
  nav .topbar-responsive-links {
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    -webkit-animation-duration: 0.5s;
            animation-duration: 0.5s;
    width: 100%;
    -webkit-animation: fadeIn 1s ease-in;
            animation: fadeIn 1s ease-in;
  }
}
		body p,
		body h4 {
			color: #3503AA;
		}
.stardos-stencil-bold {
  font-family: "Stardos Stencil", system-ui;
  font-weight: 700;
  font-style: normal;
	color: #D93600;
	font-size: 2.75em;
	margin-top: 1.5em;
}
	 body h2,
	 body h3{
		 color: #2C8DBC;
		 font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
		 }
	 body h2{
		 font-size: 2em;
		 line-height: 1.2;
	 }
	 body h3{
		 font-size: 1.5em;
		 line-height: 1.2;
	 }
@media screen and (max-width: 64em){
	.stardos-stencil-bold{
		font-size: 2.15em;
	}
	
	body h2{
		 font-size: 1.7em;
		 line-height: 1.2;
	 }
	 body h3{
		 font-size: 1.25em;
		 line-height: 1.2;
	 }
	body p{
		font-size: 0.95em;
		line-height: 1.2;
	}
}
.container-ppal{
	 background: url(../img/food_r1_c1.png) repeat;
	background-color: #1C5978;
}
.container-texto{
	 width: 93%; 
	margin-left: auto; 
	margin-right: auto; 
	background-color: #fff;
}
	 .grid-x table td p{
		 font-family: "Fredoka", sans-serif;
		 font-size: 1.1em;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
		 font-variation-settings:
    "wdth" 100;
		 line-height: 1.2;
		 
  	 }
	 .grid-x table td,
	.grid-x table th{
		 padding-bottom: 0;
	 }
.grid-x table thead{
	background-color: #F2E6FF;
}
	 .grid-x p:not(table){
		 font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
		 font-variation-settings:
    "wdth" 100;
		 font-size: 1.25em;
		 line-height: 1.35;
	 }
	 
	 .fredoka-500 {
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.inicio .fotos{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
	border-radius: 8px;
}
	 .precio{
		 color: rgba(189,1,5,1.00);
		 font-size: 1.25em;
	 }
.container-ppal a:not(.button){
	text-decoration: underline;
}
	 .guarda {
  		width: 100%; 
		min-height: 450px;
  		background-color: transparent;
        background-image: 
          radial-gradient(circle at 100% 12.5px, #888888 3px, transparent 4px), 
          radial-gradient(circle at 0% 12.5px, #888888 3px, transparent 4px),   

          radial-gradient(circle at 100% 12.5px, #ffffff 12px, transparent 13px), 
          radial-gradient(circle at 0% 12.5px, #ffffff 12px, transparent 13px),
    
         -webkit-linear-gradient(left, #ffffff, #ffffff);
       background-image: 
          radial-gradient(circle at 100% 12.5px, #888888 3px, transparent 4px), 
          radial-gradient(circle at 0% 12.5px, #888888 3px, transparent 4px),   

          radial-gradient(circle at 100% 12.5px, #ffffff 12px, transparent 13px), 
          radial-gradient(circle at 0% 12.5px, #ffffff 12px, transparent 13px),
    
          -o-linear-gradient(left, #ffffff, #ffffff);
       background-image: 
          radial-gradient(circle at 100% 12.5px, #888888 3px, transparent 4px), 
          radial-gradient(circle at 0% 12.5px, #888888 3px, transparent 4px),   

          radial-gradient(circle at 100% 12.5px, #ffffff 12px, transparent 13px), 
          radial-gradient(circle at 0% 12.5px, #ffffff 12px, transparent 13px),
    
          linear-gradient(to right, #ffffff, #ffffff);;;;;;;;

  		background-size: 
    		24px 25px, 
    		24px 25px, 
    		24px 25px, 
    		24px 25px, 
    		calc(100% - 46px) 100%;

  		background-position: 
    		left top,  
    		right top, 
    		left top,  
    		right top, 
    		center top;
  
  		background-repeat: 
    		repeat-y, 
    		repeat-y, 
    		repeat-y, 
    		repeat-y, 
    		no-repeat;

  		filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.35));
  		clip-path: inset(0px -50px 0px -50px);
}
	 .color-brownies{
		 color:#661A00;
	 }
	 .color-budines {
		 color:#8C008C;
	 }
	 .color-tortas{
		 color:#FD5F00;
	 }
	 .color-cookies{
		 color:#008C69;
	 }
	 .grid-x table th p{
		 font-weight: 600;
	 }
	 .grid-x p .button {
		 border-radius: 5px;
	 }
	 .grid-x .pie-detalle p{
		  color:#003040;
		 font-size: 0.95em;
	 }
.grid-x .pie-detalle{
	background-color: aliceblue;
	padding-top: 1.5em;
	margin-bottom: 1em;
}
.grid-x .recorda{
	background-color: antiquewhite;
	padding-top: 1em;
	margin-bottom: 2em;
}
.recuadro-marcas{
	width: 95%; 
		  margin-left: auto; 
		  margin-right: auto; 
		  border-radius: 10px; 
		  border:1px solid #ccc; 
		  padding: 1.25em; 
		  margin-bottom: 2em;
}
	  .marcas {
  		display: flex;
  		flex-wrap: wrap;
  		list-style: none;
  		padding: 0;
  		margin: 0;
  		gap: 10px;
		justify-content: center;
		  
}

.marcas li {
  display: flex;
  align-items: center;
  font-family: "Fredoka", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
	font-size: 0.86em;
	line-height: 1;
}

.marcas li::after {
  content: "|";
  margin-left: 10px;
  color: #999999;
}

.marcas li:last-child::after {
  content: "";
} 
.recetario {
	 padding-bottom: 2.5em;
}
.recetario li{
	font-family: "Fredoka", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-variation-settings:
    "wdth" 100;
	font-size: 1em;
	color:  #3503AA;
}
.recetario img{
	border-radius: 8px;
}
.recetario h3{
	line-height: 1.2;
}
	 .cta-pie{
		display: flex;
  		flex-wrap: wrap;
  		gap: 25px;
		justify-content: center;
	 }
footer {
		background-color: #074587;
		color: #fff;
		padding-top: 2em;
	}
footer a{
	color: #fff;
	text-decoration: underline;
	}
footer a:hover{
	color: #f0f0f0;
	}
footer h2,
footer h3{
	color: #fff;
		}
footer h2{
	font-size: 1.75em;
}
footer h3 {
	font-size: 1.25em;
}
footer .contacto-pie p{
	font-size: 1.1em;
	color: #fff;
}
footer li{
	font-family: "Fredoka", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-variation-settings:
    "wdth" 100;
	font-size: 1em;
}
footer .submenu{
	padding-left: 0.5em;
}
footer .redes {
	margin-top: 2em;
}
footer .redes li{
	display: inline-block;
	margin-right: 0.25em;
}
footer .casero-logo{
	width: 150px;
	height: auto;
}
footer .redes i{
	padding-bottom: 0;
	margin-bottom: 0;
}
footer .redes a{
	text-decoration: none;
	padding: 0.25em;
}
footer .redes a:hover,
footer .redes a:focus{
	color: #f0f0f0;
}
footer .pie-pie{
	padding-top: 1em;
}
footer .pie-pie p{
	font-size: 0.9em;
	color: #fff;
}
footer .linea-pie {
  height: 1px;
  width: 80%;
	margin-left: auto;
	margin-right: auto;
  background: radial-gradient(#ccc, #074587); 
}
.fotos{
	padding-bottom: 2em;
}
.fotos h1{
	color: white;
}
.fotos img{
	border-radius:7px;
	width: 100%; 
	height: auto;
	border: 1px solid #ccc;
}
.fotos .desc{
	color: #fff;
	font-size: 0.98em;
}
form {
	padding: 1.5em;
	border: 1px solid #ccc;
	border-radius: 10px;
	}
form .grid-container{
	padding-top: 1em;
}
form label,
form .button,
form a{
	font-family: "Fredoka", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: 400;
  	font-style: normal;
	font-variation-settings:
    "wdth" 100;
	font-size: 1em;
	color: #3503AA;
	}
form .button{
	border-radius: 5px;
	margin-top: 0.5em;
	color: #fff;
}
form a{
	text-decoration: underline;
	}
.foto-destacada img{
	border: 1px solid #ccc;
	border-radius: 10px;
	width: 100%;
	height: auto;
	margin-bottom: 2em;
}
.container-texto.quienes-somos p{
	font-size: 1.1em;
}
.btn-whatsapp {
    display:block;
	font-size: 1.8em;
	line-height: 1.7em;
	background: #15A271;
    width:55px;
    height:55px;
    color:#fff;
    position: fixed;
    right:15px;
    bottom:90px;
    border-radius:50%;
    text-align:center;
	z-index:999;
	border: 2px solid #15A271;
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.btn-whatsapp a{
	color: #263238;
	text-decoration: none;
	transition: color 0.15s ease-in;
	
}
.btn-whatsapp:hover,
.btn-whatsapp:focus{
	color: #fff;
	text-decoration: none;
	border: 2px solid #1ED494;
	background-color: #1ED494;
}
.btn-whatsapp i{
	color: #fff;
}
.btn-arriba {
    display:block;
	font-size: 2.4em;
	line-height: 1em;
	background: #eaaf00;
    width:55px;
    height:55px;
    color:#222;
    position: fixed;
	right:15px;
    bottom:15px;
    border-radius:50%;
    text-align:left;
	padding-left: 8px;
	padding-top: 4px;
	z-index:999;
	border: 2px solid #ffdc73; 
	box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}
.btn-arriba a{
	color: #222; 
	text-decoration: none;
	transition: color 0.15s ease-in;
	
}
.btn-arriba:hover,
.btn-arriba:focus{
	color: #222;
	text-decoration: none;
	background: #ffdc73;
	border: 2px solid #ffdc73
}
.btn-arriba i{
	color: #222;
}