/* —————————————————————————————————————————————
   FONTS & RESET
   ————————————————————————————————————————————— */
@font-face { font-family: Rubik; src: url(fonts/rubik-variablefont-wght.ttf); }
@font-face { font-family: Poppins; src: url(fonts/poppins-thin.ttf); }
@font-face { font-family: 'Poppins Bold'; src: url(fonts/poppins-bold.ttf); }

* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --caney-cream: #fcf6f0;
  --caney-page: #f1ece6;
  --caney-surface: #fffdfa;
  --caney-border: rgba(123, 98, 82, 0.14);
  --caney-border-strong: rgba(123, 98, 82, 0.22);
  --caney-text: #353232;
  --caney-muted: #7f6558;
  --caney-shadow: 0 10px 24px rgba(63, 48, 38, 0.06);
  --caney-shadow-hover: 0 16px 30px rgba(63, 48, 38, 0.1);
}

/* —————————————————————————————————————————————
   PAGE BACKGROUND
   ————————————————————————————————————————————— */
body {
  background: var(--caney-page);
  font-family: Rubik, sans-serif;
  color: var(--caney-text);
}

header {
  background: rgba(252, 246, 240, 0.96);
  border-bottom: 1px solid rgba(123, 98, 82, 0.08);
  backdrop-filter: blur(10px);
}

/* —————————————————————————————————————————————
   HEADER + NAV
   ————————————————————————————————————————————— */
.navbar {
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
  position: relative;           /* needed for mobile dropdown positioning */
}
.logo {
  height: 42px;
  width: auto;
  display: block;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}
.nav-links a {
  text-decoration: none;
  color: var(--caney-text);
  font-family: 'Poppins Bold', sans-serif;
  font-size: 0.96rem;
  letter-spacing: 0.01em;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.nav-links a:hover {
  background-color: rgba(127, 101, 88, 0.08);
  color: var(--caney-muted);
  transform: translateY(-1px);
}

/* Hidden by default; shown only on mobile via media query */
.menu-toggle {
  display: none;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  color: #000;                  /* ← hamburger in black */
}

/* —————————————————————————————————————————————
   SLIDER  (FADE VERSION)
   ————————————————————————————————————————————— */
.slider {
  position: relative;
  overflow: hidden;
  height: 400px;                /* desktop/tablet default */
  margin-bottom: 0;
}
.slides {
  position: relative;
  height: 100%;
}
.slides img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;            /* cover by default */
  object-position: center;
  opacity: 0;
  transition: opacity 600ms ease;
}
.slides img.active { opacity: 1; }

.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 253, 250, 0.86);
  color: var(--caney-text);
  box-shadow: 0 8px 20px rgba(63, 48, 38, 0.08);
  backdrop-filter: blur(8px);
  border: none;
  font-size: 1.8rem;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.slider-btn:hover {
  background: rgba(255, 253, 250, 1);
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 12px 24px rgba(63, 48, 38, 0.12);
}
.slider-btn.prev { left: 1rem; }
.slider-btn.next { right: 1rem; }

/* —————————————————————————————————————————————
   “¿Qué buscas?” CARDS
   ————————————————————————————————————————————— */
.search-section {
  max-width: 1240px;
  margin: -1.4rem auto 0;
  padding: 2rem 1.5rem 0;
  position: relative;
  z-index: 2;
}
.quebuscasopening {
  font-family: Poppins, sans-serif;
  color: var(--caney-text);
  font-size: clamp(2rem, 3vw, 2.45rem);
  letter-spacing: 0.08em;
  text-align: center;
  margin-bottom: 1.35rem;
}
.quebuscas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.1rem;
  margin-bottom: 2rem;
}

.SantoDomingo,
.column,
.location-card {
  background: var(--caney-surface);
  border: 1px solid var(--caney-border);
  border-radius: 18px;
  box-shadow: var(--caney-shadow);
  text-align: center;
  padding: 1.4rem 1rem 1.25rem;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.SantoDomingo:hover,
.column:hover,
.location-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--caney-shadow-hover);
  border-color: var(--caney-border-strong);
}

.icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 0.95rem;
  opacity: 0.8;
  transition: transform 220ms ease, opacity 220ms ease;
}

.location-card:hover .icon {
  transform: translateY(-2px);
  opacity: 1;
}

.location-name {
  font-family: 'Poppins Bold', sans-serif;
  font-size: 1.15rem;
  line-height: 1.3;
  margin-bottom: 0.95rem;
}

.learnmore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 0.68rem 1rem;
  border-radius: 999px;
  background: var(--caney-muted);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Poppins Bold', sans-serif;
  font-size: 0.68rem;
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 8px 16px rgba(127, 101, 88, 0.14);
}
.learnmore:hover {
  background: #6c5649;
  transform: translateY(-1px);
  box-shadow: 0 12px 20px rgba(127, 101, 88, 0.18);
}

/* —————————————————————————————————————————————
   INTRO SECTION
   ————————————————————————————————————————————— */
.intro-section {
  text-align: center;
  max-width: 1120px;
  padding: 0.5rem 2rem 1rem;
  margin: 0 auto 2rem;
  margin-bottom: 2rem;
}
.intro {
  font-family: Poppins, sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.intro2 {
  font-family: 'Poppins Bold', sans-serif;
  font-size: 1.25rem;
  color: var(--caney-muted);
}

/* —————————————————————————————————————————————
   CONTACT CTA
   ————————————————————————————————————————————— */
.contact-cta {
  text-align: center;
  margin: 2rem 0;
}
.btn-contact {
  background-color: var(--caney-muted);
  color: #fff;
  text-decoration: none;
  font-family: 'Poppins Bold', sans-serif;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 10px 18px rgba(127, 101, 88, 0.16);
}
.btn-contact:hover {
  background-color: #6c5649;
  transform: translateY(-1px);
  box-shadow: 0 14px 22px rgba(127, 101, 88, 0.22);
}

/* —————————————————————————————————————————————
   FOOTER
   ————————————————————————————————————————————— */
footer {
  background-color: var(--caney-cream);
  padding: 1rem;
  text-align: center;
  border-top: 1px solid rgba(123, 98, 82, 0.08);
}
footer span {
  color: var(--caney-text);
  font-size: 0.9rem;
}

/* —————————————————————————————————————————————
   MOBILE-ONLY TWEAKS (≤ 768px)
   ————————————————————————————————————————————— */
@media (max-width: 768px) {
  .navbar {
    padding: 0.8rem 1rem;
  }

  .logo { height: 36px; }

  /* Show hamburger, hide links until toggled */
  .menu-toggle { display: inline-flex; align-items: center; justify-content: center; color:#000; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    right: 0.5rem;
    background: var(--caney-cream);
    border: 1px solid rgba(123, 98, 82, 0.1);
    border-radius: 16px;
    box-shadow: 0 14px 30px rgba(63, 48, 38, 0.12);
    padding: 0.5rem 0;
    width: 70vw;
    max-width: 320px;
    flex-direction: column;
    z-index: 1000;
  }
  .navbar.open .nav-links { display: flex; }
  .nav-links a {
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    border-radius: 0;
  }
  .nav-links a:last-child { border-bottom: 0; }

  /* Slider keeps exact 1200x350 aspect ratio (no letterboxing) */
  .slider {
    height: auto;               /* let aspect-ratio control height */
    aspect-ratio: 1200 / 350;   /* = 24 / 7 ≈ 3.4286 */
  }
  .slides { height: 100%; }
  .slides img {
    object-fit: cover;          /* fills container at same ratio */
    background: transparent;    /* no black bars */
  }

  .search-section {
    margin-top: -0.75rem;
    padding: 1.5rem 1rem 0;
  }

  .quebuscasopening {
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
  }

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

  .SantoDomingo,
  .column,
  .location-card {
    min-height: 164px;
    padding: 1.1rem 0.85rem 0.95rem;
    border-radius: 16px;
  }

  .icon {
    width: 44px;
    height: 44px;
  }

  .location-name {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .learnmore {
    min-width: 132px;
    padding: 0.65rem 0.9rem;
    font-size: 0.66rem;
  }
}

@media (max-width: 560px) {
  .quebuscas {
    grid-template-columns: 1fr;
  }
}

/* Homepage H1: the page had no h1 at all, which costs search and AI-answer
   engines their main topic signal. The owner wants the minimalist hero
   untouched, so the h1 stays in the markup for crawlers and screen readers
   but is visually hidden (standard accessibility clip pattern — not display:
   none, which some engines discount). */
.home-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}