*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#fffaf3;
color:#2d2118;
overflow-x:hidden;
}

img{
width:100%;
display:block;
}

a{
text-decoration:none;
cursor:pointer;
color:inherit;
}

/* HEADER */

header{
background:#fffaf3;
padding:18px 6%;
display:flex;
justify-content:space-between;
align-items:center;
gap:25px;
position:sticky;
top:0;
z-index:100;
box-shadow:0 2px 15px rgba(0,0,0,.06);
}

.logo span{
display:block;
font-size:30px;
font-family:Georgia,serif;
color:#3a2618;
}

.logo small{
font-size:11px;
letter-spacing:1px;
color:#7b6d60;
}

nav{
display:flex;
gap:30px;
}

nav a{
font-weight:bold;
font-size:15px;
}

/* BOTONES */

.btn{
background:#6fa08b;
color:white;
padding:14px 24px;
border-radius:8px;
display:inline-block;
font-weight:bold;
}

.btn.light{
background:white;
color:#2d2118;
border:1px solid #ddd;
}

/* HERO */

.hero{
min-height:640px;
padding:70px 6%;
display:grid;
grid-template-columns:1fr 330px;
gap:45px;
align-items:center;
background:
linear-gradient(90deg,rgba(255,250,243,.96),rgba(255,250,243,.72)),
url("hero.jpg");
background-size:cover;
background-position:center;
}

.hero h1{
font-size:clamp(44px,7vw,78px);
font-family:Georgia,serif;
line-height:1.05;
margin-bottom:25px;
}

.hero em{
color:#6fa08b;
}

.hero p{
font-size:20px;
line-height:1.6;
margin-bottom:30px;
max-width:620px;
}

.buttons{
display:flex;
gap:15px;
flex-wrap:wrap;
}

.info-card{
background:white;
padding:30px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.info-card h3{
color:#6fa08b;
margin:15px 0;
}

/* MENU */

.menu{
width:100%;
max-width:1500px;
margin:auto;

padding:
70px 60px;

text-align:center;
}

.tag{
text-transform:uppercase;
color:#6fa08b;
font-size:13px;
font-weight:bold;
letter-spacing:1px;
}

.menu h2{
font-size:42px;
font-family:Georgia,serif;
margin:10px 0 35px;
}

.menu-layout{

display:grid;

grid-template-columns:
1.2fr 1.8fr 1.2fr;

gap:40px;

width:100%;

align-items:start;

}

.menu-box{
background:white;
padding:25px;
border-radius:14px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
text-align:left;
}

.menu-box h3{
color:#6fa08b;
margin-bottom:20px;
font-size:18px;
}

.drink{
display:grid;
grid-template-columns:60px 1fr auto;
gap:12px;
align-items:center;
margin-bottom:16px;
}

.drink img{
height:60px;
object-fit:cover;
border-radius:8px;
}

.pastry-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.pastry-grid img,
.bakery img{
height:190px;
object-fit:cover;
border-radius:10px;
margin-bottom:12px;
}

.menu-box h4{
font-size:18px;
margin-bottom:6px;
}

.menu-box p{
line-height:1.4;
}

.menu-box a{
display:inline-block;
margin-top:15px;
}

/* ABOUT */

.about{
padding:50px 6% 70px;
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:35px;
align-items:center;
}

.about-img{
height:360px;
object-fit:cover;
border-radius:14px;
}

.about h2{
font-size:42px;
font-family:Georgia,serif;
margin:15px 0;
}

.about-text p{
line-height:1.7;
margin-bottom:20px;
}

.instagram{
background:#eef6ef;
padding:30px;
border-radius:14px;
text-align:center;
}

.insta-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:10px;
margin:20px 0;
}

.insta-grid img{
height:120px;
object-fit:cover;
border-radius:8px;
}

/* BENEFICIOS */

.benefits{
padding:40px 6%;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:25px;
background:#fff6ea;
}

.benefits div{
text-align:center;
}

.benefits i{
font-size:35px;
color:#6fa08b;
margin-bottom:10px;
}

/* LOCATION */

.location{
padding:70px 6%;
display:grid;
grid-template-columns:1fr 1.3fr 1fr;
gap:35px;
align-items:center;
}

.location iframe{
width:100%;
height:320px;
border:0;
border-radius:14px;
}

.location p{
margin:15px 0;
}

/* MODAL */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(45,33,24,.75);
z-index:500;
justify-content:center;
align-items:center;
padding:25px;
}

.modal-content{
background:#fffaf3;
color:#2d2118;
width:100%;
max-width:760px;
max-height:85vh;
overflow-y:auto;
border-radius:18px;
padding:32px;
box-shadow:0 20px 50px rgba(0,0,0,.3);
border:2px solid #6fa08b;
}

.modal-content h2{
font-family:Georgia,serif;
font-size:36px;
text-align:center;
margin-bottom:20px;
}

.modal-content h3{
color:#6fa08b;
margin:25px 0 12px;
font-size:22px;
}

.modal-content ul{
list-style:none;
}

.modal-content li{
background:white;
padding:14px;
border-radius:12px;
margin-bottom:12px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
line-height:1.4;
}

.modal-content span{
color:#6b5b4b;
font-size:14px;
}

.close{
float:right;
font-size:34px;
font-weight:bold;
cursor:pointer;
color:#6fa08b;
}

/* WHATSAPP */

.float{
position:fixed;
right:25px;
bottom:25px;
width:65px;
height:65px;
background:#25d366;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
font-size:36px;
color:white;
box-shadow:0 8px 25px rgba(0,0,0,.25);
z-index:200;
}

/* FOOTER */

footer{
background:#4b2f1d;
color:white;
padding:35px 6%;
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
}

/* TABLET */

@media(max-width:900px){

header{
flex-direction:column;
text-align:center;
}

nav{
flex-wrap:wrap;
justify-content:center;
}

.hero,
.about,
.location{
grid-template-columns:1fr;
text-align:center;
}

.hero p{
margin-left:auto;
margin-right:auto;
}

.buttons{
justify-content:center;
}

.menu-layout{
grid-template-columns:1fr 1fr;
}

.bakery{
grid-column:1 / 3;
}

.benefits{
grid-template-columns:1fr 1fr;
}

}

/* TELEFONO */

@media(max-width:600px){

header{
padding:20px 6%;
}

.logo span{
font-size:34px;
}

nav{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px;
width:100%;
text-align:center;
}

.hero{
padding:55px 6%;
grid-template-columns:1fr;
}

.hero h1{
font-size:48px;
}

.hero p{
font-size:18px;
}

.buttons{
flex-direction:column;
}

.btn{
width:100%;
text-align:center;
}

.menu{
padding:55px 6%;
}

.menu h2,
.about h2{
font-size:34px;
}

.menu-layout,
.about,
.location,
.benefits{
grid-template-columns:1fr;
}

.bakery{
grid-column:auto;
}

.pastry-grid{
grid-template-columns:1fr;
}

.about-img{
height:300px;
}

.insta-grid img{
height:95px;
}

.location iframe{
height:260px;
}

footer{
flex-direction:column;
text-align:center;
}

.float{
width:58px;
height:58px;
font-size:32px;
right:18px;
bottom:18px;
}

.modal-content{
padding:24px;
max-height:82vh;
}
/* ARREGLO FINAL PC */

@media(min-width:901px){

.menu{
width:100% !important;
max-width:1400px !important;
margin:0 auto !important;
padding:70px 6% !important;
}

.menu-layout{
display:grid !important;
grid-template-columns:repeat(3, 1fr) !important;
gap:30px !important;
width:100% !important;
max-width:1200px !important;
margin:0 auto !important;
}

.menu-box{
width:100% !important;
max-width:none !important;
}

.about{
max-width:1200px !important;
margin:0 auto !important;
grid-template-columns:1fr 1fr 1fr !important;
}

@media(min-width:1000px){

.menu{
padding-left:80px;
padding-right:80px;
}

/* ARREGLO DEFINITIVO MENÚ EN PC */

@media (min-width: 901px){

.menu{
width:100vw !important;
max-width:none !important;
margin-left:50% !important;
transform:translateX(-50%) !important;
padding:70px 6vw !important;
}

.menu-layout{
width:100% !important;
max-width:none !important;
display:grid !important;
grid-template-columns:1fr 1.4fr 1fr !important;
gap:35px !important;
}

.menu-box{
width:100% !important;
max-width:none !important;
}

.pastry-grid{
grid-template-columns:1fr 1fr !important;
}

@media(min-width:901px){

.menu-layout{
max-width:1150px;
margin:0 auto;
}

.menu-box{
padding:30px;
}

.pastry-grid img,
.bakery img{
height:220px;
}

.drink img{
width:70px;
height:70px;
}

@media(min-width:901px){

.menu-layout{
max-width:1350px;
margin:auto;
gap:55px;
}

.menu-box{
padding:35px;
border-radius:18px;
}

.menu-box h3{
font-size:24px;
}

.drink{
grid-template-columns:
80px 1fr auto;
gap:18px;
}

.drink img{
width:80px;
height:80px;
}

.pastry-grid img,
.bakery img{
height:250px;
}

.menu-box h4{
font-size:22px;
}

.menu-box p{
font-size:16px;
line-height:1.6;
}

}