*{
  box-sizing: border-box;
  margin: 0;
  scroll-behavior: smooth;
} 

body, div, ul, span, h1,h2, h3, h4, p, nav, header, footer, a, li, label {
    margin: 0;
    padding: 0px;
}

:root{
  --green:#314224;
  --green-dark:#223018;
  --gold:#a5793b;
  --cream:#fbf5e9;
  --white:#ffffff;
  --ink:#2f3228;
  --radius:24px;
  --shadow:0 20px 40px rgba(0,0,0,.08);
  --container:1200px;
  --space-xs:.75rem;
  --space-sm:1rem;
  --space-md:1.5rem;
  --space-lg:3rem;
  --space-xl:6rem;
}

body{
  margin: 0;
  font-family: Montserrat,Arial,sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.55;
  overflow-x: hidden;
}

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

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

.container{
  width:min(var(--container), calc(100% - 2rem));
  margin-inline:auto;
}

.section-shell, .hero__img{
  width: 100%
}

.site-header{
  position: relative;
  top:0;
  left:0;
  width: 100vw;
  z-index:1000;
  background:rgba(251,245,233,.92);
  backdrop-filter:blur(14px);
  box-sizing: border-box;
  align-items: center;
}

.navbar{
  height:85px;
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  gap:2rem;
  background-color: #fef3f5;
  box-sizing: border-box;
}

.nav-links{
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}

.nav-links a{
  position: relative;
  padding: 8px 0;
}

.nav-links a::after{
  content:"";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transition: .25s;
}

.nav-links a:hover::after,.nav-links a.active::after{
  transform: scaleX(1);
}

.brand img{
  width:100px;
  display: block;
  align-items: center;
}

.nav-links a:hover::after,.nav-links a.active::after{
  transform: scaleX(1);
}

.menu-toggle{
  display: none;
  background: none;
  border: 0;
  width: 42px;
  height: 42px;
}

.menu-toggle span{
  display: block;
  height: 2px;
  background: var(--green);
  margin: 7px 4px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
  border: 1px solid transparent;
  transition: .25s;
  white-space: nowrap;
}

.btn-primary{
  background: var(--green);
  color:#fff;
  box-shadow: 0 10px 22px rgba(49,66,36,.2);
  margin-left: 0px;
}

.btn-footer {
  background: var(--green);
  color:#fff;
  margin-left: 40px;
  margin-right: 40px;
  box-shadow: 0 10px 22px rgba(49,66,36,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 25px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
  border: 1px solid transparent;
  transition: .25s;
  justify-content: space-evenly;
}

.btn-primary:hover{
  background: var(--green-dark);
  transform: translateY(-2px);
}

.btn-secondary{
  background:rgba(255,255,255,.55);
  border-color:rgba(49,66,36,.35);
  color: var(--green);
}

.btn-secondary:hover{
  background:#fff;
  transform: translateY(-2px);
}

.logo__header {
  margin-left: 30px;
  object-fit: contain;
}

.hero{
    position:relative;
    min-height:100svh;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:
    radial-gradient(
        circle at top right,
        rgba(255,210,210,.35),
        transparent 35%
    ),
    linear-gradient(
        135deg,
        #fbf5e9,
        #fffaf3
    );
}

.hero-grid{
  display:grid;
  grid-template-columns:
  minmax(320px,540px)
  minmax(320px,1fr);
  align-items:center;
  gap:4rem;
}

.hero-image{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:1;
    pointer-events:none;
}

.eyebrow{
  font-family:Caveat,cursive;
  font-size:25px;
  color:var(--gold);
  margin:0 70px 6px 0;
}

.hero h1{
  font-family:Cormorant Garamond,serif;
  font-size:clamp(42px,5vw,72px);
  line-height:.92;
  margin: 0 70px 24px 0;
  color:var(--green);
  letter-spacing:-.03em;
}

.hero h1 span{
  font-family:Caveat,cursive;
  font-size:.75em;
  color:#7d5a31;
  display:block;
  letter-spacing:.01em;
}

.hero-copy{
  max-width:430px;
  font-size:15px;
  margin-bottom:26px;
  font-weight: 500;
  color: #000;
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:800px;
    text-align:center;
}

.hero-actions{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-left: 60px;
}

.hero-visual{
  height:470px;
  position:relative;
}

.fruta-natural {
  width: 100px;
}

.ingredientes-selectos {
  width: 80px;
}

.gelato-elaboración {
  width: 80px;
}

.calidad-premium {
  width: 80px;
}

.difference,.reviews{position:relative;padding:30px 0;background:#fff8ee}

.two-cols{display:grid;grid-template-columns:380px 1fr;gap:20px;align-items:center}

.section-kicker{
  font-family:Cormorant Garamond,serif;
  font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--green);
  font-size:32px;
  line-height:1;
  margin:0 0 8px;
}

.section-fa-kicker {
  font-family:Cormorant Garamond,serif;
  font-weight:700;text-transform:uppercase;
  letter-spacing:.03em;
  color:var(--green);
  font-size:40px;
  line-height:1;
  margin:0 0 8px;
}

.difference h2,.experience h2{font-family:Caveat,cursive;color:#825d33;font-size:34px;line-height:1;margin:0 0 18px;}

.bold-copy{font-weight:700;color:var(--green)}

.benefits-grid{
  display:grid;
  grid-template-columns:
  repeat(
    auto-fit,
    minmax(160px,1fr)
  );
  gap:1.5rem;
}

.benefits-grid article{aspect-ratio:1/1;border-radius:50%;background:#f5ead9;display:grid;place-items:center;text-align:center;padding:20px;transition:transform .25s ease,box-shadow .25s ease,background-color .25s ease}

.benefits-grid span{font-size:38px;color:var(--gold)}

.benefits-grid img{transition:transform .25s ease}

.benefits-grid h3{font-family:Cormorant Garamond,serif;font-size:22px;line-height:1.05;margin:8px 0 0}

.flavors{padding:30px 0 25px;background:var(--cream)}

.section-title{text-align:center;margin-bottom:32px}

.section-title h2{font-family:Caveat,cursive;font-size:31px;color:#8a6135;margin:0}

.flavor-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(180px,2fr));
  gap:1.25rem;
}

.flavor-card{
  background:#b09569;
  color: #fffbf7;
  border:1px solid rgba(49,66,36,.12);
  border-radius: 12px;
  overflow:hidden;
  text-align:center;
  box-shadow:0 12px 24px rgba(54,38,21,.06);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}

.flavor-card h3{
  font-size:15px;
  line-height:1.1;
  margin:12px 8px 16px;
}

.flavor-card > div,
.flavor-img{
  height:150px;
  position:relative;
  background:#f2dfcc;
  overflow:hidden;
}

.flavor-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .35s ease,filter .35s ease;
}

.experience{background:#fff8ee;padding:70px 0}

.experience-wrap{display:grid;grid-template-columns:420px 1fr;gap:70px;align-items:center}

.occasion-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}

.occasion-grid span{font-size:26px;color:var(--gold);display:grid;text-align:center;gap:7px}

.occasion-grid b{font-size:12px;color:var(--ink)}

.experience-photo{
  height:330px;
  border-radius:25px;
  position:relative;
  overflow:hidden;
}

.experience-photo > div{
  height:100%;
}

.experience-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.gallery{padding-top:22px;background:var(--cream)}

.compact{margin-bottom:18px}

.gallery-grid{
  display: grid;
  grid-template-columns:repeat(2,minmax(0,0.5fr));
  gap: 1.2rem;
  margin: 20px;
  }

.gallery-item-sabores{
  position:relative;
  overflow:hidden;
  background:#fff8ee;
  transition:transform .25s ease,box-shadow .25s ease;
  border-radius: 25px;
  border: 1px solid var(--gold);
}

.gallery-item-sabores img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .4s ease,filter .4s ease;
}

.review-card{background:rgba(255,255,255,.75);border:1px solid rgba(165,121,59,.45);border-radius:16px;padding:26px 28px;text-align:center;box-shadow:0 12px 22px rgba(54,38,21,.04)}

.stars{color:#d19b37;letter-spacing:4px;margin-bottom:12px}

.review-card p{font-size:14px}

.review-card b{font-size:13px;color:var(--green)}

.review-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;
}

.location{background:#fff8ee;padding:62px 0}

.location-grid{
  display:grid;
  grid-template-columns:
  400px
  1fr;
  gap:3rem;
}

.info-line{
  display:flex;
  gap:16px;
  margin:22px 0;
}

.info-line span{color:var(--gold);font-size:24px}

.map{
  width:100%;
  height:285px;
  border:0;
  border-radius:18px;
  box-shadow:var(--shadow);
  filter:saturate(.85);
}

.final-cta{background:linear-gradient(90deg,#f8d6da 0%,#f7e1df 52%,#fff1e8 100%);padding:44px 0;overflow:hidden}

.final-wrap{display:grid;grid-template-columns:1fr 360px;align-items:center;gap:30px}

.final-wrap p:not(.section-kicker){max-width:580px}

.cta-icecream{
  height:360px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.gelato-footer{
  width:min(100%,340px);
  height:auto;
}


.btn-location {
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 22px rgba(49,66,36,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 40px;
  border-radius: 25px;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .03em;
  border: 1px solid transparent;
  transition: .25s;
}

.site-footer{
  background-color: #28351E;
  color:#fff;
  padding:18px 0;
}

.footer-wrap{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
}

.footer-wrap img{
  width:110px;
}

.social{
  display:flex;
  gap:14px;
}

.social a{
  width:24px;
  height:24px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  font-weight:700;
}

.whatsapp{
  position:fixed;
  right:15px;
  bottom:15px;
  background:#4bae4f;
  color:#fff;
  padding:4px 10px;
  border-radius:25px;
  font-weight:800;
  font-size:13px;
  box-shadow:0 8px 50px rgba(0,0,0,8);
  z-index:20;
}

.whatsapp:hover{
  box-shadow:0 12px 60px rgb(18, 218, 0);
}

.whatsapp-icon {
  width: 35px;
}

@media (max-width:1024px){
  .navbar{
    justify-content:space-between;
    padding-inline:1rem;
  }

  .logo__header{
    margin-left:0;
  }

  .hero-grid,
  .two-cols,
  .experience-wrap,
  .location-grid,
  .final-wrap{
    grid-template-columns:1fr;
  }

  .hero-content{
    margin-inline:auto;
    text-align:center;
  }

  .hero-copy{
    margin-inline:auto;
  }

  .hero-actions{
    justify-content:center;
  }

  .flavor-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .gallery-strip{
    grid-template-columns:repeat(3,minmax(0,1fr));
    height:auto;
  }

  .gallery-item-sabores{
    min-height:210px;
  }
}

@media (max-width:1024px){
  body.menu-open{
    overflow:hidden;
  }

  .navbar{
    height:76px;
  }

  .brand img{
    width:110px;
  }

  .nav-cta{
    display:none;
  }

  .menu-toggle{
    display:block;
    z-index:1001;
  }

  .nav-links{
    position:fixed;
    inset:0px 0 auto 0;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-height:calc(100svh - 76px);
    overflow-y:auto;
    padding:1.5rem;
    background:#fff8ee;
    box-shadow:var(--shadow);
    transform:translateY(-120%);
    transition:transform .3s ease;
  }

.brand img{
  width:90px;
  display: block;
  align-items: center;
}

  .nav-links.open{
    transform:translateY(0);
  }

  .nav-links a{
    display:block;
    padding:12px 0;
  }

  .hero{
    min-height:auto;
    padding:118px 0 64px;
  }

  .hero-grid{
    gap:0;
  }

  .hero__img{
    width:100%;
    height:100%;
    object-fit:cover;
    opacity: .50;
    transform:none;
  }

  .benefits-grid,
  .occasion-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .review-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .footer{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    height: 300px;
  }

  .footer-wrap{
    height: 200px;
  }
}

@media (max-width:480px){
  *{
    box-sizing: border-box;
  }
  .navbar{
    padding-inline:.875rem;
  }

  .hero{
    padding:102px 0 50px;
  }

  .hero h1, .eyebrow{
    margin: 0px 0px 5px;
  }

  .hero-actions{
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    margin-right: 60px;
  }

  .btn{
    width:100%;
    padding-inline:18px;
  }

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

  .benefits-grid article{
    aspect-ratio:auto;
    min-height:180px;
    border-radius:18px;
  }

  .flavor-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.875rem;
  }

  .gallery-strip{
    grid-template-columns:1fr;
  }

  .flavor-card h3{
    font-size:12px;
    margin:10px 6px 12px;
  }

  .gallery-item-sabores{
    min-height:220px;
  }

  .location-grid,
  .final-wrap{
    gap:1.5rem;
  }

  .gelato-footer{
    width:min(100%,280px);
  }

  .whatsapp{
    width:54px;
    height:54px;
    padding:0;
    display:grid;
    place-items:center;
    font-size:0;
  }

  .whatsapp::before{
    font-size:14px;
  }

  .footer-wrap p{
    width:min(100%,28ch);
  }
}