/*
  Maricota Decor - Static HTML/CSS/JS version
  Notes:
  - No build step required.
  - Open index.html in the browser.
*/

:root{
  --bg: #ffffff;
  --text: #111827;          /* gray-900 */
  --muted: #4b5563;         /* gray-600 */
  --muted-2:#6b7280;        /* gray-500 */
  --line: #e5e7eb;          /* gray-200 */
  --soft: #fffbeb;          /* amber-50 */
  --primary:#d97706;        /* amber-600 */
  --primary-2:#b45309;      /* amber-700 */
  --chip:#f3f4f6;           /* gray-100 */
  --shadow: 0 8px 30px rgba(0,0,0,.08);
  --radius: 18px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}
img{max-width:100%; display:block;}
button{font:inherit;}

/* Ensure the native [hidden] attribute always wins.
   Without this, our class rules (e.g., .nav { display:flex }) can override it,
   causing the mobile menu to appear duplicated on desktop.
*/
[hidden]{display:none !important;}

.container{max-width: 1120px; margin:0 auto; padding:0 16px;}
.container--narrow{max-width: 920px;}

/* Header */
.header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:50;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(229,231,235,.75);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height: 80px;
}
.header__logo img{height:64px; width:auto;}

.nav{display:flex; align-items:center; gap: 28px;}
.nav__link{
  appearance:none;
  border:0;
  background:transparent;
  color:#374151; /* gray-700 */
  cursor:pointer;
  padding:8px 2px;
  transition: color .18s ease;
}
.nav__link:hover{color:var(--primary);}

.menu-btn{
  display:none;
  border:0;
  background:transparent;
  padding:10px;
  border-radius:12px;
  cursor:pointer;
}
.menu-btn:hover{background: rgba(243,244,246,.9);}

.nav--mobile{
  flex-direction:column;
  gap: 6px;
  padding: 10px 8px 14px;
}
.nav__link--mobile{
  width:100%;
  text-align:left;
  padding: 10px 12px;
  border-radius: 12px;
}
.nav__link--mobile:hover{background: rgba(243,244,246,.9); color:#111827;}

/* Hero */
.hero{
  min-height: 100vh;
  padding-top: 80px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: linear-gradient(180deg, var(--soft), #ffffff);
}
.hero__inner{text-align:center; padding: 64px 0;}
.hero__logo{height: 256px; width:auto; margin: 0 auto 22px;}
.hero__subtitle{
  font-size: clamp(18px, 2.2vw, 24px);
  color: var(--muted);
  max-width: 760px;
  margin: 0 auto 26px;
}

/* Sections */
.section{padding: 80px 0;}
.section--soft{background: linear-gradient(180deg, var(--soft), #ffffff);}
.section__head{text-align:center; margin-bottom: 44px;}
.h2{font-size: clamp(34px, 4vw, 48px); margin:0 0 10px; font-weight: 500; letter-spacing: -.02em;}
.lead{font-size: 20px; color: var(--muted); margin:0;}

/* Buttons */
.btn{
  border:0;
  cursor:pointer;
  border-radius: 999px;
  padding: 12px 22px;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-weight: 600;
  transition: transform .08s ease, background .18s ease, box-shadow .18s ease;
}
.btn:active{transform: translateY(1px);}
.btn--primary{background: var(--primary); color: #fff;}
.btn--primary:hover{background: var(--primary-2);}
.btn--full{width:100%; justify-content:center;}

/* Filters */
.filters{display:flex; flex-wrap:wrap; justify-content:center; gap: 10px; margin-top: 22px;}
.chip{
  border:0;
  background: var(--chip);
  color:#374151;
  padding: 10px 18px;
  border-radius: 999px;
  cursor:pointer;
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.chip:hover{background:#e5e7eb;}
.chip--active{background: var(--primary); color:#fff; box-shadow: 0 12px 25px rgba(217,119,6,.22);}

/* Masonry (CSS columns) */
.masonry{column-count: 3; column-gap: 16px;}
@media (max-width: 1024px){.masonry{column-count: 2;}}
@media (max-width: 720px){.masonry{column-count: 1;}}

.card-item{
  display:inline-block;
  width:100%;
  margin: 0 0 16px;
  border-radius: 14px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .18s ease, box-shadow .25s ease;
}
.card-item:hover{transform: translateY(-2px); box-shadow: 0 22px 35px rgba(0,0,0,.14);}
.card-item img{width:100%; height:auto; object-fit:cover; transition: transform .3s ease;}
.card-item:hover img{transform: scale(1.04);}

.card-item__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 14px;
  opacity:0;
  transition: opacity .25s ease;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.7) 100%);
}
.card-item:hover .card-item__overlay{opacity:1;}
.card-item__title{color:#fff; font-size: 18px; font-weight: 600;}

/* About card */
.card{
  background:#fff;
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 26px;
}
.card--big{padding: 30px; margin-bottom: 34px;}
.card p{color:#374151; font-size: 18px; margin: 0 0 16px;}
.card p:last-child{margin-bottom:0;}
.accent{color: var(--primary); font-weight: 700;}
.signature{margin-top: 18px; text-align:right; font-style: italic; color: var(--primary); font-size: 20px;}

.features{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;}
@media (max-width: 900px){.features{grid-template-columns:1fr;}}
.feature{text-align:center; padding: 8px;}
.feature__icon{
  width: 64px; height: 64px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #fef3c7; /* amber-100 */
  display:grid;
  place-items:center;
}
.h3{margin:0 0 6px; font-size: 20px; font-weight: 600; color:#1f2937;}
.h3--spaced{margin-bottom: 14px;}
.feature p{margin:0; color: var(--muted);}

/* Contact */
.contact{display:grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items:start;}
@media (max-width: 980px){.contact{grid-template-columns:1fr;}}

.info-list{display:flex; flex-direction:column; gap: 18px;}
.info-item{display:flex; gap: 14px; align-items:flex-start;}
.info-item__icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  background:#fef3c7;
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}
.info-item__title{font-weight: 900; color:#1f2937; margin-bottom: 3px;}
.info-item__text{color: var(--muted);}

.hours{
  margin-top: 30px;
  border-radius: 22px;
  padding: 22px;
  background: linear-gradient(135deg, var(--soft), #fff7ed); /* amber-50 to orange-50 */
}
.hours__title{margin:0 0 10px; font-size: 18px; font-weight: 700; color:#1f2937;}
.hours p{margin: 6px 0; color:#374151;}

.form{display:flex; flex-direction:column; gap: 16px;}
.field{display:flex; flex-direction:column; gap: 8px;}
.field__label{font-size: 13px; font-weight: 700; color:#374151;}
.input, .textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  outline: none;
  background:#fff;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.input:focus, .textarea:focus{
  border-color: rgba(217,119,6,.55);
  box-shadow: 0 0 0 4px rgba(217,119,6,.18);
}

/* Footer */
.footer{background:#111827; color:#fff; padding: 48px 0;}
.footer__inner{text-align:center;}
.footer__title{margin:0 0 6px; font-size: 22px; font-weight: 700;}
.footer__subtitle{margin:0 0 18px; color:#9ca3af;}
.footer__made{display:flex; justify-content:center; align-items:center; gap: 8px; color:#9ca3af;}
.footer__copy{margin: 18px 0 0; color:#6b7280; font-size: 14px;}

/* Icons */
.icon{display:inline-block; width: 22px; height: 22px;}
.icon--sm{width: 16px; height: 16px;}
.icon--lg{width: 26px; height: 26px;}
.icon--xl{width: 34px; height: 34px;}

/* Lightbox */
.lightbox[hidden]{
  /* IMPORTANT: the HTML 'hidden' attribute should fully hide the lightbox.
     Without this, the .lightbox { display:flex } rule overrides the browser default [hidden]{display:none}
     and the lightbox would appear stuck on page load. */
  display:none !important;
}
.lightbox{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.95);
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox__stage{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 72px 22px;
}
.lightbox__img{max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px;}
.lightbox__btn{
  position:absolute;
  border:0;
  cursor:pointer;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color:#fff;
  padding: 10px;
  transition: background .18s ease;
}
.lightbox__btn:hover{background: rgba(255,255,255,.18);}
.lightbox__btn--close{top: 16px; right: 16px;}
.lightbox__btn--prev{left: 16px;}
.lightbox__btn--next{right: 16px;}

.lightbox__meta{
  position:absolute;
  left:50%;
  bottom: 28px;
  transform: translateX(-50%);
  text-align:center;
  color:#fff;
}
.lightbox__title{margin:0 0 6px; font-size: 22px; font-weight: 700;}
.lightbox__count{margin:0; color:#d1d5db;}

/* Responsive header */
@media (max-width: 768px){
  .nav--desktop{display:none;}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center;}
}

/* Make room on mobile corners (safer reading) */
@media (max-width: 520px){
  .container{padding-left: 18px; padding-right: 18px;}
}


/* Contact - adjusted to match preview */
.contact--match-preview{
  grid-template-columns: 1fr;
  justify-items: center;
}

.contact__info--full{
  width: 100%;
  max-width: 980px;
}

.h3--contact-title{
  text-align:center;
  font-size: clamp(32px, 3vw, 42px);
  font-weight: 700;
  margin-bottom: 42px;
}

.info-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 72px;
  align-items:start;
}

.info-column{
  display:flex;
  flex-direction:column;
  gap: 28px;
}

.info-item--card{
  align-items:center;
  gap: 22px;
}

.info-item__icon{
  width: 86px;
  height: 86px;
  border-radius: 20px;
  background: #f3e7b5;
}

.info-item__icon .icon{
  width: 36px;
  height: 36px;
}

.info-item__title{
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 6px;
  color: #0f172a;
}

.info-item__text{
  font-size: 20px;
  color: #516175;
}

@media (max-width: 900px){
  .info-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .info-column{
    gap: 24px;
  }

  .h3--contact-title{
    margin-bottom: 28px;
  }
}