/* ============== BUTTONS ============== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff-ui); font-weight:700; font-size:1rem;
  padding:.95rem 1.4rem; border-radius:var(--r-md);
  border:1px solid transparent;
  transition:transform .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  text-align:center; white-space:nowrap;
}
.btn:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn--primary{background:var(--accent); color:#fff}
.btn--primary:hover{background:var(--accent-dark)}
.btn--wa{background:var(--wa-green); color:#fff}
.btn--wa:hover{background:var(--wa-green-dark)}
.btn--ghost{
  background:transparent; color:var(--text);
  border:1px solid var(--border-strong);
}
.btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.btn--light{
  background:rgba(255,255,255,.96); color:var(--text); border:1px solid rgba(0,0,0,.06);
}
.btn--light:hover{background:#fff}
.btn--large{padding:1.1rem 1.7rem; font-size:1.05rem}

/* ============== CARDS ============== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:1.5rem;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
  border-color:var(--border-strong);
}

/* ============== CHIPS / TAGS ============== */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(94,107,59,.08);
  color:var(--accent);
  border:1px solid rgba(94,107,59,.18);
  padding:.4rem .8rem;
  border-radius:99px;
  font-family:var(--ff-ui); font-size:.8rem; font-weight:600;
  letter-spacing:.02em;
}
.chip svg{width:14px; height:14px}

/* ============== HERO RATING BADGE ============== */
.hero-rating{
  display:inline-flex; align-items:center; gap:.6rem;
  background:rgba(255,255,255,.92);
  color:var(--text);
  padding:.6rem 1rem;
  border-radius:99px;
  font-family:var(--ff-ui); font-size:.92rem;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(4px);
}
.hero-rating .stars{display:inline-flex; gap:1px}
.hero-rating .stars svg{width:16px; height:16px; fill:#E0A028}
.hero-rating strong{font-weight:700; color:var(--text)}
.hero-rating span{color:var(--text-2); font-weight:500}

/* ============== OPEN BADGE (live) ============== */
.open-dot{display:inline-block; width:9px; height:9px; border-radius:50%; background:#8A8675; flex-shrink:0}
.open-dot.is-open{background:#5BAF6E; box-shadow:0 0 0 4px rgba(91,175,110,.18)}
.open-dot.is-closed{background:#B85C5C}
.open-badge{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-ui); font-size:.85rem; font-weight:600;
  color:var(--text-2);
}

/* ============== FORMS ============== */
form .field{margin-bottom:1.1rem}
form label{
  display:block; font-family:var(--ff-ui);
  font-size:.85rem; font-weight:600; color:var(--text);
  margin-bottom:.4rem;
}
form input,form textarea,form select{
  width:100%; font-family:var(--ff-body); font-size:1rem;
  background:var(--surface); color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:.85rem 1rem;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
form input:focus,form textarea:focus,form select:focus{
  outline:0; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(94,107,59,.16);
}
form textarea{min-height:120px; resize:vertical}
form .row-2{display:grid; gap:1.1rem; grid-template-columns:1fr}
@media (min-width:600px){form .row-2{grid-template-columns:1fr 1fr}}

/* ============== MODAL (mentions legales) ============== */
.modal{
  position:fixed; inset:0;
  background:rgba(31,29,22,.65);
  z-index:var(--z-modal);
  display:none; align-items:center; justify-content:center;
  padding:1rem;
  opacity:0; transition:opacity .25s var(--ease);
}
.modal.is-open{display:flex; opacity:1}
.modal__card{
  background:var(--bg); color:var(--text);
  border-radius:var(--r-lg);
  max-width:680px; width:100%;
  max-height:85vh; overflow-y:auto;
  padding:2rem;
  position:relative;
  box-shadow:var(--shadow-lg);
}
.modal__close{
  position:absolute; top:1rem; right:1rem;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--bg-alt); color:var(--text);
  font-size:1.5rem; line-height:1;
}
.modal h3{margin-top:0}
.modal h4{font-family:var(--ff-display); font-size:1.05rem; margin:1.4rem 0 .4rem}
.modal p{font-size:.92rem; line-height:1.6; margin-bottom:.7rem}

/* ============== LIGHTBOX ============== */
.lightbox{
  position:fixed; inset:0;
  background:rgba(0,0,0,.92);
  z-index:var(--z-modal);
  display:none; align-items:center; justify-content:center;
  opacity:0; transition:opacity .25s var(--ease);
}
.lightbox.is-open{display:flex; opacity:1}
.lightbox img{max-width:92vw; max-height:88vh; border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.lightbox__close,.lightbox__prev,.lightbox__next{
  position:absolute;
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:1.3rem; line-height:1;
  display:grid; place-items:center;
  transition:background .2s var(--ease);
}
.lightbox__close{top:1.2rem; right:1.2rem}
.lightbox__prev{left:1.2rem; top:50%; transform:translateY(-50%)}
.lightbox__next{right:1.2rem; top:50%; transform:translateY(-50%)}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:rgba(255,255,255,.28)}