/* ============================================================
   CHILLBOT — Theme CSS
   Orange · Grey · White  |  Bold Typography
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');
/* ── VARIABLES ── */
:root {
  --orange:     #FF5C00;
  --orange-lt:  #FF7A2F;
  --orange-dk:  #CC4800;
  --orange-pale:#FFF0E8;
  --grey-900:   #1A1A1A;
  --grey-800:   #2C2C2C;
  --grey-700:   #3F3F3F;
  --grey-500:   #767676;
  --grey-300:   #C4C4C4;
  --grey-100:   #F2F2F2;
  --white:      #FFFFFF;
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 6px 24px rgba(0,0,0,.12);
  --shadow-lg:  0 16px 48px rgba(0,0,0,.16);
  --shadow-orange: 0 8px 32px rgba(255,92,0,.30);
  --radius:     10px;
  --radius-lg:  18px;
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family:'Outfit', sans-serif;
  background:var(--white);
  color:var(--grey-900);
  overflow-x:hidden;
  line-height:1.6;
}
img { max-width:100%; display:block; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
button { cursor:pointer; font-family:inherit; }

/* ── BOLD TITLE SYSTEM ── */
h1, h2, h3, h4 {
  font-family:'Montserrat', sans-serif;
  font-weight:900;
  line-height:1.05;
  letter-spacing:.04em;
  text-transform:uppercase;
}
h1 { font-size:clamp(3.2rem, 8vw, 7rem); }
h2 { font-size:clamp(2.4rem, 5vw, 4.2rem); }
h3 { font-size:clamp(1.5rem, 3vw, 2rem); }
h4 { font-size:1.1rem; letter-spacing:.02em; }

.title-accent { color:var(--orange); }
.section-tag {
  font-family:'Montserrat', sans-serif;
  font-size:.85rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--orange);
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:.5rem;
}
.section-tag::before {
  content:''; display:block;
  width:28px; height:3px;
  background:var(--orange); border-radius:2px;
}

/* ── LAYOUT ── */
.container { max-width:1240px; margin:0 auto; padding:0 5%; }
.section    { padding:6rem 0; }
.section-sm { padding:3rem 0; }
.divider {
  height:1px;
  background:linear-gradient(90deg, transparent, var(--grey-300), transparent);
  margin:0 5%;
}

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Montserrat', sans-serif;
  font-size:1rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase;
  padding:14px 32px; border-radius:var(--radius);
  border:2px solid transparent;
  transition:var(--transition);
}
.btn-primary {
  background:var(--orange); color:var(--white);
  border-color:var(--orange);
}
.btn-primary:hover {
  background:var(--orange-dk); border-color:var(--orange-dk);
  transform:translateY(-2px);
  box-shadow:var(--shadow-orange);
}
.btn-outline {
  background:transparent; color:var(--orange);
  border-color:var(--orange);
}
.btn-outline:hover {
  background:var(--orange); color:var(--white);
  transform:translateY(-2px);
}
.btn-ghost {
  background:transparent; color:var(--grey-700);
  border-color:var(--grey-300);
}
.btn-ghost:hover {
  border-color:var(--orange); color:var(--orange);
}
.btn-white {
  background:var(--white); color:var(--orange);
  border-color:var(--white);
}
.btn-white:hover {
  background:var(--orange-pale);
}

/* ── BADGES ── */
.badge {
  display:inline-block;
  font-family:'Montserrat', sans-serif;
  font-size:.72rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase;
  padding:4px 12px; border-radius:100px;
}
.badge-orange { background:var(--orange); color:var(--white); }
.badge-grey   { background:var(--grey-100); color:var(--grey-700); }
.badge-outline { border:1.5px solid var(--orange); color:var(--orange); }

/* ── CARDS ── */
.card {
  background:var(--white);
  border-radius:var(--radius-lg);
  border:1.5px solid var(--grey-100);
  overflow:hidden;
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.card:hover {
  border-color:var(--orange);
  box-shadow:var(--shadow-orange);
  transform:translateY(-4px);
}

/* ── FORM ELEMENTS ── */
.form-label {
  display:block;
  font-family:'Montserrat', sans-serif;
  font-size:.82rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--grey-700); margin-bottom:.5rem;
}
.form-control {
  width:100%;
  background:var(--grey-100);
  border:1.5px solid transparent;
  border-radius:var(--radius);
  color:var(--grey-900);
  font-family:'Outfit',sans-serif;
  font-size:.95rem;
  padding:.85rem 1.1rem;
  transition:var(--transition);
  outline:none;
}
.form-control:focus {
  background:var(--white);
  border-color:var(--orange);
  box-shadow:0 0 0 4px rgba(255,92,0,.1);
}
.form-control::placeholder { color:var(--grey-300); }
select.form-control option { background:var(--white); }

/* ── FOOTER BASE ── */
footer {
  background:var(--grey-900);
  color:var(--grey-300);
}
.footer-grid {
  display:grid;
  grid-template-columns:2.5fr 1fr 1fr 1fr;
  gap:3rem;
  padding:5rem 5% 3rem;
}
.footer-logo {
  font-family:'Montserrat', sans-serif;
  font-size:2.2rem; font-weight:900;
  color:var(--white); letter-spacing:-.03em;
  text-transform:uppercase;
}
.footer-logo span { color:var(--orange); }
.footer-desc {
  font-size:.9rem; line-height:1.7;
  color:var(--grey-500); margin-top:.8rem; max-width:300px;
}
.footer-col-title {
  font-family:'Montserrat', sans-serif;
  font-size:.82rem; font-weight:800;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey-500); margin-bottom:1.2rem;
}
.footer-col a {
  display:block; font-size:.9rem;
  color:var(--grey-300); margin-bottom:.7rem;
  transition:color var(--transition);
}
.footer-col a:hover { color:var(--orange); }
.footer-bottom {
  border-top:1px solid var(--grey-800);
  padding:1.5rem 5%;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.82rem; color:var(--grey-500);
}
.social-row { display:flex; gap:.7rem; margin-top:1.5rem; }
.social-btn {
  width:38px; height:38px; border-radius:8px;
  background:var(--grey-800); border:1px solid var(--grey-700);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; transition:var(--transition);
  text-decoration:none;
}
.social-btn:hover { background:var(--orange); border-color:var(--orange); }

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes floatY {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50%      { transform:translateY(-14px) rotate(1deg); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.94); }
  to   { opacity:1; transform:scale(1); }
}
.anim-fadeup  { animation:fadeUp .7s ease both; }
.anim-delay1  { animation-delay:.15s; }
.anim-delay2  { animation-delay:.3s; }
.anim-delay3  { animation-delay:.45s; }

/* ── NAV ── */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:999;
  height:68px;
  background:rgba(255,255,255,.95);
  backdrop-filter:blur(12px);
  border-bottom:1.5px solid var(--grey-100);
  display:flex; align-items:center;
  padding:0 5%;
  box-shadow:var(--shadow-sm);
}
.nav-logo {
  /* font-family:'Montserrat', sans-serif; */
  font-family:'Outfit', sans-serif;
  font-size:2.2rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
  color:var(--grey-900);
  text-decoration:none;
}
.nav-logo span { color:var(--orange); }
.nav-links {
  display:flex; gap:2rem; margin-left:3rem;
}
.nav-links a {
  font-family:'Outfit', sans-serif;
  font-size:.88rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--grey-700);
  transition:color var(--transition);
  position:relative; padding-bottom:4px;
}
.nav-links a::after {
  content:''; position:absolute;
  bottom:0; left:0; right:100%; height:2px;
  background:var(--orange); transition:right var(--transition);
}
.nav-links a:hover, .nav-links a.active { color:var(--orange); }
.nav-links a:hover::after, .nav-links a.active::after { right:0; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:1rem; }
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; margin-left:auto; }
.hamburger span { display:block; width:24px; height:2.5px; background:var(--grey-900); border-radius:2px; transition:.3s; }
/* Hamburger → X animation */
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; transform:translateX(-8px); }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav open state (toggled via JS) */
.nav-links.mobile-open {
  display:flex !important;
  flex-direction:column;
  position:fixed;
  top:68px; left:0; right:0;
  background:#fff;
  padding:1.5rem 5%;
  border-bottom:1.5px solid var(--grey-100);
  gap:1.2rem;
  z-index:998;
  box-shadow:0 16px 40px rgba(0,0,0,.1);
  animation:slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .nav-right { display:none; }
  .nav-links { gap:1.4rem; margin-left:2rem; }
  .nav-links a { font-size:.8rem; }
  .navbar { padding:0 4%; }
}
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-right { display:none; }
  .hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr; gap:1.5rem; padding:3rem 5% 2rem; }
  .footer-bottom { flex-direction:column; gap:.5rem; text-align:center; }
  .section { padding:4.5rem 0; }
}
@media(max-width:480px) {
  .btn { padding:12px 22px; font-size:.9rem; }
  .section { padding:3rem 0; }
}

/* ── WHATSAPP FLOAT BUTTON ── */
#whatsapp-float {
  position:fixed;
  width:70px; height:70px;
  bottom:20px; right:20px;
  z-index:9999;
  cursor:pointer;
  transition:transform .3s;
  display:block;
}
#whatsapp-float img {
  width:100%; height:100%;
  border-radius:50%;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  object-fit:cover;
}
#whatsapp-float:hover { transform:scale(1.12); }
@media(max-width:480px) {
  #whatsapp-float { width:54px; height:54px; bottom:16px; right:16px; }
}

@media (max-width: 768px){

  .navbar{
    padding:14px 20px;
  }

  .nav-links{
    position:absolute;
    top:70px;
    left:0;
    width:100%;

    background:#111;

    flex-direction:column;
    align-items:center;

    gap:20px;
    padding:30px 0;

    display:none;
  }

  .nav-links.active{
    display:flex;
  }

  .nav-right{
    display:none;   /* hide desktop button */
  }

  .hamburger{
    display:flex;
    cursor:pointer;
  }

}