/* ══════════════════════════════
   COMPONENTS — Arandu Iberá
   Componentes compartidos entre todas las páginas:
   nav desktop/mobile, scroll indicator, header_section,
   line, botones primario/secundario/cta
   Linkear SEGUNDO en todos los HTML
══════════════════════════════ */

/* ── SCROLL INDICATOR ── */
.scroll_indicator {
  width: 34px;
  height: 58px;
  border: 2px solid white;
  border-radius: 999px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  position: absolute;
  bottom: 40px;
}

.scroll_dot {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  animation: scrollAnim 1.8s infinite;
}

@keyframes scrollAnim {
  0%   { transform: translateY(0);    opacity: 1;   }
  50%  { transform: translateY(14px); opacity: 0.5; }
  100% { transform: translateY(0);    opacity: 1;   }
}

/* ── HEADER SECTION (título + línea + subtítulo) ── */
.header_section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  text-align: center;
}

.line {
  width: 75px;
  height: 3px;
  background-color: var(--muted-foreground);
  border-radius: 2px;
}

/* ── BOTONES COMPARTIDOS ── */
.btn_primary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: var(--primary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease-in-out;
}

.btn_primary:hover {
  background: var(--secondary);
  transform: translateY(-2px);
}

.btn_secondary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: rgba(246, 241, 231, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.35);
  transition: 0.3s ease-in-out;
}

.btn_secondary:hover {
  background: rgba(246, 241, 231, 0.28);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-2px);
}

.btn_cta {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background-color: var(--secondary);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.15s;
}

.btn_cta:hover {
  background-color: #c4945f;
  transform: translateY(-2px);
}

.btn_reserve_big {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  background-color: var(--primary);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn_reserve_big:hover {
  background-color: var(--secondary);
  transform: translateY(-3px);
}

/* ── BACK BUTTON (páginas secundarias) ── */
.back_btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius);
  color: var(--muted-foreground);
  font-size: 14px;
  transition: 0.3s ease-in-out;
  white-space: nowrap;
  width: 140px;
}

.back_btn:hover {
  background-color: var(--muted);
  color: var(--primary);
}

/* ── RESPONSIVE COMPARTIDO ── */
@media (max-width: 768px) {
  .scroll_indicator { display: none; }

  .btn_primary,
  .btn_secondary {
    width: 100%;
    justify-content: center;
    font-size: 13px;
    padding: 10px 20px;
  }

  .btn_cta {
    width: 100%;
    justify-content: center;
    font-size: 13px;
  }

  .btn_reserve_big {
    width: 100%;
    justify-content: center;
  }

  .back_btn span { display: none; }
  .back_btn      { width: auto; }
}